<div class="toolbar">
  <div class="group">
    <nz-form-item style="margin-bottom: 0;height: 32px">
      <nz-form-label nzFor="refreshSpeed">更新速度</nz-form-label>
      <nz-form-control>
        <nz-select [(ngModel)]="refreshSpeedModel" [attr.id]="'refreshSpeed'" name="refreshSpeed" nzShowSearch nzAllowClear nzSize="small" style="width: 130px;">
          <nz-option *ngFor="let item of [['正常',1000],['快',200],['慢',5000]]" [nzLabel]="item[0]" [nzValue]="item[1]"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

  </div>
  <div class="group">
    <div class="search-area pl-3">
      <button nz-button [nzType]="'primary'" (click)="refreshSpeedChangeEvent()">自检</button>
    </div>
  </div>

</div>
<div class="main-wrapper">
  <div class="main">
    <div class="main-left p-5">
      <nz-row>
        <nz-col><i nz-icon style="font-size: 80px;" nzType="check-circle" nzTheme="outline" class="text-success" [ngClass]="someTooHot()?'text-danger':'text-success'"></i></nz-col>
        <nz-col class="pl-3">
          <h6 *ngIf="!someTooHot()">目前各硬件温度均正常，散热情况良好</h6>
          <h6 *ngIf="someTooHot()" class="text-danger">温度过高！！！</h6>
          <p>
            CPU温度：<span [ngClass]="tooHot('cpuTemp')?'text-danger':'text-success'">{{temperatureOptions.currentStatus['cpuTemp'].value}}°C</span> &nbsp;&nbsp;
            <br>
            显卡温度：<span [ngClass]="tooHot('gpuTemp')?'text-danger':'text-success'">{{temperatureOptions.currentStatus['gpuTemp'].value}}°C</span> &nbsp;&nbsp;
            <br>
            硬盘温度：<span [ngClass]="tooHot('diskTemp')?'text-danger':'text-success'">{{temperatureOptions.currentStatus['diskTemp'].value}}°C</span> &nbsp;&nbsp;
          </p>
        </nz-col>
      </nz-row>
      <div style="height: 600px" echarts (chartInit)="onChartInit(temperatureOptions.chartId,$event)" [options]="temperatureOptions"></div>

    </div>
    <div class="main-right">
      <div echarts [options]="fanSpeedOptions" (chartInit)="onChartInit(fanSpeedOptions.chartId,$event)" style="width: 400px;height: 400px;"></div>
      <div class="pl-3"><h5>性能</h5></div>

      <nz-row *ngFor="let options of performanceOptionsList; index as i" class="pt-3">
        <nz-col>
          <div echarts [options]="options" (chartInit)="onChartInit(options.chartId,$event)" style="width: 160px;height: 100px;border:solid 2px {{options.color}};"></div>
        </nz-col>
        <nz-col class="pl-3" style="width: 250px;">
          <h4>{{options.name}}</h4>
          <label [innerHTML]="options.desc"></label>
        </nz-col>
      </nz-row>


    </div>
  </div>


</div>


